// webpack 用的是node的方法 common.js
const path = require("path");
//引入安装包
const htmlWebpackPlugin = require("html-webpack-plugin");
// 实例化
const htmlWplugins = new htmlWebpackPlugin({
  template: path.join(__dirname, "./src/index.html"), //表示以谁为模板进行打包
  filename: "index.html", //生成的模块文件名字
  title: "webpack学习中",
}); //默认是index.html

module.exports = {
  mode: "development", //development 开发模式 //production 线上模式
  entry: path.join(__dirname, "./src/index.js"), //webpack打包的入口文件,打包的入口文件路径需要采用绝对路径
  output: {
    //打包的出口文件， 出口文件的位置， 出口文件的名字
    path: path.join(__dirname, "./dist"), //出口文件的位置 dist是默认打包文件目录
    filename: "bundle.js", //出口文件的名字
  },
  //挂载并使用插件
  plugins: [htmlWplugins],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        //test设置需要匹配的文件类型，支持正则
        test: /\.css$/,
        //use表示该文件类型需要调用的loader
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.(png|jpg|jpeg)$/,
        use: [
            {
                loader: "url-loader",
                options: {
                    // name: "[name]_[hash:8].[ext]",
                    limit: 10240, // 这里单位为(b) 10240 => 10kb
                    esModule: false
                    // 这里如果小于10kb则转换为base64打包进js文件，如果大于10kb则打包到dist目录
                }
            }
        ]
    }
    ],
  },
};
